import React, { Component } from 'react';
import { View } from 'react-native';
import Picker from 'react-native-picker';
import {
  Title,
  Item,
  ImportBtn,
  Input,
  RadioPicker,
} from 'bee/components/MakePlan';
import ChooseBtn from 'bee/components/MakePlan/ChooseBtn';
import { createDateData, pickerOptions } from 'bee/pickerOptions';
import { Languages, Selectors } from 'bee/constants';

import styles from './styles';

// @flow
type Props = {
  info: object,
  changeInfo: Function,
  navigation: object,
  title: string,
  type?: string,
};

export default class PersonInfo extends Component<Props> {
  constructor(props) {
    super(props);

    const { name, birth, sex, job, relation } = this.props.info;

    this.state = {
      name,
      birth,
      sex,
      job,
      relation,
    };

    this.showDatePicker = this.showDatePicker.bind(this);
    this.changeField = this.changeField.bind(this);
    this.showRealations = this.showRealations.bind(this);
  }

  showDatePicker() {
    const data = createDateData();
    const options = pickerOptions(data, value => {
      this.changeField({ birth: value.join('-') });
    });
    Picker.init(options);
    Picker.show();
  }

  showRealations() {
    const data = Selectors.relations;
    const options = pickerOptions(data, value => {
      this.changeField({ relation: value[0] });
    });

    Picker.init(options);
    Picker.show();
  }

  changeField(state) {
    this.setState(state, () => {
      this.props.changeInfo(this.state);
    });
  }

  render() {
    const { navigate } = this.props.navigation;
    const { changeField } = this;

    return (
      <View style={styles.section}>
        <Title title={this.props.title}>
          <ImportBtn
            text={Languages.importFromCustomer}
            onPress={() => navigate('CustomerList')}
          />
        </Title>

        <View>
          {this.props.type === 'applicantInfo' ? (
            <Item title={Languages.insurerRelation}>
              <ChooseBtn
                text={this.state.relation}
                onPress={this.showRealations}
              />
            </Item>
          ) : null}

          <Item title={Languages.nameFlag}>
            <Input
              placeholder={Languages.enterName}
              value={this.state.name}
              onChangeText={name => {
                changeField({ name });
              }}
            />
          </Item>
          <Item title={Languages.birthFlag}>
            <ChooseBtn text={this.state.birth} onPress={this.showDatePicker} />
          </Item>
          <Item title={Languages.genderFlag}>
            <View style={styles.row}>
              {Selectors.genders.map((value, index) => (
                <RadioPicker
                  key={index}
                  index={index}
                  value={value}
                  isSelected={this.state.sex === index}
                  onPress={() => {
                    changeField({ sex: index });
                  }}
                />
              ))}
            </View>
          </Item>
          <Item title={Languages.insurerJob}>
            <ChooseBtn
              text={this.state.job}
              onPress={() => {
                navigate('ChooseJob', {
                  updateJob: ({ type, name }) => {
                    this.setState({ job: type });
                  },
                });
              }}
            />
          </Item>
        </View>
      </View>
    );
  }
}
